<!-- 数据看板 -->
<template>
	<view class="board">
		<div class="one">
			<div class="p">业绩目标</div>
			<div class="div">
				<span>详情</span>
				<u-icon name="arrow-right"></u-icon>
			</div>
		</div>
		<image src="../../../static/diImage/饼图.png" style="width: 100%;height: 400rpx;" mode=""></image>
		<div class="one">
			<div class="p">成交排名</div>
			<div class="div">
				<span>详情</span>
				<u-icon name="arrow-right"></u-icon>
			</div>
		</div>
		<div class="list">
			<image class="img1" src="../../../static/diImage/进度1.png" mode=""></image>
			<image class="img2" src="../../../static/diImage/进度2.png" mode=""></image>
		</div>
		<div class="one">
			<div class="p">销售漏斗</div>
			<div class="div">
				<span>详情</span>
				<u-icon name="arrow-right"></u-icon>
			</div>
		</div>
		<image src="../../../static/diImage/漏斗.png" style="width: 100%;height: 600rpx;" mode=""></image>
		<div class="one">
			<div class="p">销售预测</div>
			<div class="div">
				<span>详情</span>
				<u-icon name="arrow-right"></u-icon>
			</div>
		</div>
		<div class="lists">
			<div class="p">时间</div>
			<div class="p">商机数量</div>
			<div class="p">预销售金额</div>
		</div>
		<div class="li" v-for="item,index in list" :key="index">
			<div class="p">{{item.time}}</div>
			<div class="p">{{item.num}}</div>
			<div class="p">￥{{item.jia}}.00</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{time:'2019-01',num:1000,jia:1000000.00},
					{time:'2019-02',num:1000,jia:1000000.00},
					{time:'2019-03',num:1000,jia:1000000.00},
					{time:'2019-04',num:1000,jia:1000000.00},
					{time:'2019-05',num:1000,jia:1000000.00},
					{time:'2019-06',num:1000,jia:1000000.00},
					{time:'2019-07',num:1000,jia:1000000.00},
					{time:'2019-08',num:1000,jia:1000000.00},
					{time:'2019-09',num:1000,jia:1000000.00},
					{time:'2019-10',num:1000,jia:1000000.00},
					{time:'2019-11',num:1000,jia:1000000.00},
					{time:'2019-12',num:1000,jia:1000000.00}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	
.board{
	width: 100%;
	height: 100%;
	.one{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		.p{
			font-weight: 600;
			color: #666666;
		}
		.div{
			display: flex;
			align-items: center;
			color: #999999;
		}
	}
	.list{
		.img1{
			width: 100%;
			height: 800rpx;
		}
		.img2{
			width: 100%;
			height: 300rpx;
		}
	}
	
	.lists{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f2f2f2;
		padding: 0 20rpx;
	}
	.li{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		border: 1rpx solid gainsboro;
	}
}
</style>
